a<template>
    <view class="cl-tabbar-item" @tap="tapItem">
        <image
            class="cl-tabbar-item__image"
            v-if="src"
            :src="src"
            :style="{
                height: size,
                width: size
            }"
        />

        <text
            class="cl-tabbar-item__label"
            :style="{
                color
            }"
            >{{ label }}</text
        >
    </view>
</template>

<script>
import Emitter from '../../mixins/emitter';
import { getParent } from '../../utils';

export default {
    componentName: 'ClTabbarItem',

    props: {
        label: String,
        name: String,
        iconPath: String,
        selectedIconPath: String,
        iconSize: {
            type: Number,
            default: 50
        }
    },

    mixins: [Emitter],

    computed: {
        size() {
            return this.iconSize + 'rpx';
        },

        color() {
            return this.isActive ? this.parent.selectedColor : this.parent.color;
        },

        src() {
            return this.isActive ? this.selectedIconPath : this.iconPath;
        },

        isActive() {
            return this.name && this.parent.name === this.name;
        },

        parent() {
            return getParent.call(this, 'ClTabbar', ['name', 'color', 'selectedColor']);
        }
    },

    created() {
        this.dispatch('ClTabbar', 'insert', this.name);
    },

    methods: {
        tapItem() {
            this.dispatch('ClTabbar', 'change', this.name);
        }
    }
};
</script>
